{% extends "layout.html" %} {%block styles %}
<link rel="stylesheet" href="../../../static/sass/swiper-3.4.2.min.css">
<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  html {
    font-size: 100px;
  }
  
  .class .content {
    margin-bottom: .56rem !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .class .searchBtn {
    position: fixed;
    top: 0;
    right: 0;
    padding: .104rem .2rem;
    font-size: .2rem;
    color: #fff;
    z-index: 49;
  }
  
  .class .class-item {
    width: calc(33.333333333333336%);
    float: left;
    text-align: center;
    margin: 0.15rem 0;
  }
  
  .class .class-item .item-img {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 auto;
    box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1);
    border-radius: 100%;
  }
  
  .class .class-item .item-img[lazy=loading] {
    background-size: .5rem;
    background-image: url('../images/loading.png');
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .class .class-item .item-name {
    display: block;
    padding-top: 0.05rem;
    height: .2rem;
    line-height: .2rem;
    font-size: 0.12rem;
    color: #999;
  }
  
  .tab-title-container1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ff6457;
    display: flex;
    align-items: center;
    height: 0.44rem;
    text-align: center;
    justify-content: center;
    z-index: 9;
  }
  
  .tab-title1 {
    color: #fff;
    font-size: .14rem;
    width: 16%;
    text-align: center;
    padding: .025rem 0;
    border: 1px solid #f5f5f5;
    position: relative;
  }
  
  .tab-title1:last-child {
    border-radius: 0 .04rem .04rem 0;
  }
  
  .tab-title1:not(:first-of-type) {
    border-left: none;
  }
  
  .tab-title1:not(:first-of-type) {
    border-left: none;
  }
  
  .tab-title1:first-child {
    border-radius: .04rem 0 0 .04rem;
  }
  
  .tab-title1.active {
    background: #fff;
    color: #ff6457;
  }
  
  .classWrapper {
    margin-bottom: .2rem;
  }
  
  .blank44 {
    margin-top: .44rem;
  }
</style>

{%endblock%} {% block content %}
<div class="class">
  <ul class="tab-title-container1">
    {%for item in data.tabtitle %}
    <li class="tab-title1 zymkwap">{{item}}</li>
    {% endfor %}
  </ul>
  <div class="blank44"></div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {%for item in data.comic_type %}
      <div class="content swiper-slide">
        {%for item in item.data %}
        <div>
          <a href="/sort/type={{item.id}}&page=1&name={{item.name}}&by=人气&sort=click">
            <div class="class-item">
              <img src="{{item.src}}" class="item-img" data-src="{{item.src}}" />
              <span class="item-name">- {{item.name}} -</span>
            </div>
          </a>
        </div>
        {% endfor %}
      </div>
      {% endfor %}
    </div>
  </div>
</div>
<a class="searchBtn zymkwap ift-search" href="/search"></a>
{% endblock %} {% block script %}
<script src="../../../static/js/common/jquery.min.js"></script>
<script src="../../../static/js/common/swiper-3.4.2.jquery.min.js"></script>
<script>
  $(function() {
    var title = $('.tab-title1');
    title.eq(0).addClass('active');
    var swiper = new Swiper('.swiper-container', {
      onSlideChangeEnd: function(swiper) {
        title.eq(swiper.activeIndex).addClass('active').siblings().removeClass('active')
      }
    });
    $('.tab-title-container1').on('click', 'li', function() {
      let index = $(this).index();
      swiper.slideTo(index);
    })
  })
</script>
{% endblock %}